<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
  <meta charset="utf-8">
  <title>树组件</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/pms/spu.css" >
</head>
<body>


<form class="layui-form" onsubmit="return false">




`<div class="layui-row layui-col-space10">
  <div class="layui-col-md3">
   <div id="test1" style="width: 300px;"></div>
  </div>
  <div class="layui-col-md7">


<script type="text/html" id="toolbarDemo">

        <div class="layui-inline">
          <div class="layui-input-inline">
            <input  name="" id="key" lay-verify="required|phone" autocomplete="off" class="layui-input" placeholder="组名||描述搜索">
          </div>
        </div>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm " lay-event="csp" ><i class="layui-icon layui-icon-circle"></i>查询</button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-warm"  lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-normal"  lay-event="pdelete" ><i class="layui-icon layui-icon-delete"></i>批量删除</button>

</script>

    <table  id="menu" lay-filter="menu" class="layui-hide"></table>
  </div>
</div>
</form>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="contract">关联</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="ups">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>



<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" ></script>
<script src="../lib/layui-v2.5.5/layui.js" ></script>
 <script src="../js/pms/spu.js" ></script>

</body>
<script type="text/javascript">

 // $("#a").val("1,23,170");
  layui.config({
    base: '../js/ext/'
  }).extend({
    cascader: 'cascader/cascader'
  }).use(['jquery', 'cascader','form'], function () {
    var $ = layui.jquery, cascader = layui.cascader;
	var areaTree =getdata();

	 var form = layui.form;
	function getdata(){
            var datac=[];
            $.ajax({
                url:'/product/pmscategory/list/tree',
                type:'get',
                async:false,
                success:function(databack){
                  datac=databack
                }
            });
            return datac.data;
        }

    cascader.render({
      elem: $('input[name=areas]')[0],
      multiple: false,
      showAllLevels: true,
      props: {
        label: 'name',
        value: 'catId',
        children: 'children'
      },
      options: areaTree

    });



  });
  </script>
</html>